<template>
  <div class="pages">
    <template>
      <div class="user-info flex-column-center">
        <img class="user-image" :src="avatar" v-show="avatar"/>
        <div class="user-name">{{name}}</div>
      </div>
      <div class="msg">
        {{message}}
      </div>
      <div class="btn back" @click="close" v-if="successStatus">关闭</div>
      <!-- <div class="btn" @click="submit" v-else>立即参与</div> -->
    </template>
  </div>
</template>

<script>
import {authByCode,submitByOpenid} from '@/api/index.js'
import {getUrlParam} from '@/utils/index.js'
export default {
  name: "index",
  data() {
    return {
      // appid:"wx67540d593387cde5",  // 华安
      appid:"wx990d3f98fa758929", //   通立
      message:'抽奖参与中...',
      avatar:'',
      name:'',
      sessionCode:this.$dayjs().format('YYYYMMDD'),
      openid:'',
      accessToken:'',
      successStatus:0,//是否已参与抽奖
    };
  },
  created() {
    this.login();
  },
  methods: {
    async login(){
      const openid=  window.localStorage.getItem('openid')
      let sessionCode = getUrlParam('sessionCode');
      sessionCode || (sessionCode = this.sessionCode);
      const itemSessionCode = window.localStorage.getItem('sessionCode')
      if(openid&&(sessionCode&&sessionCode === itemSessionCode)){
          this.message='您已经参与抽奖了哦~'
            this.successStatus = 1;
          this.avatar = window.localStorage.getItem('avatar')
          this.name = window.localStorage.getItem('name')
          this.openid = openid
          this.sessionCode = sessionCode
        return;
      }
      const urlCode = getUrlParam('code');
      if (!urlCode) {
        this.authLogin(this.appid);
      }else{
        // 登录
        const {data,code,msg} = await authByCode({code:urlCode,sessionCode});
        if(code==200){
          this.openid = data.openid
          this.sessionCode = sessionCode
          this.accessToken = data.accessToken
          this.submit();
          window.localStorage.setItem('accessToken',data.accessToken)
        }else{
          this.message="未知异常，请退出重新尝试"
        }
      }
    },
    // 授权登录
    authLogin(baseAppid) {
      // + location.pathname
      let baseurl =
        process.env.NODE_ENV === 'development'
          ? 'http://game.sztldt.net/404' + location.search
          : location.href;
      let redirect_uri = encodeURIComponent(baseurl);
      var path = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${baseAppid}&redirect_uri=${redirect_uri}&response_type=code&scope=snsapi_userinfo&state=3#wechat_redirect`;
      window.location.href = path;
    },
    onClick(){
      if(this.avatar){
        this.close();
      }else{
        this.submit();
      }
    },
    submit(){
      const {sessionCode,openid} = this;
      submitByOpenid({
        "sessionCode": sessionCode,
        "openId": openid,
        "accessToken": this.accessToken,
      }).then(res=>{
        const {data} = res;
        this.avatar = data.headImgUrl
        this.name = data.nickName
        if(data.nickName!=='微信用户'){
          this.message='恭喜你！参与成功'
          this.successStatus = 1;
          window.localStorage.setItem('avatar',data.headImgUrl)
          window.localStorage.setItem('name',data.nickName)
          window.localStorage.setItem('sessionCode',sessionCode)
          window.localStorage.setItem('openid',openid)
        }else{
          this.successStatus = 0;
          this.message='请点击下方授权“使用完整服务”后参与'
        }
      }).catch(err=>{
        this.message="未知异常，请退出重新尝试"
      })
    },
    close(){
      window.WeixinJSBridge.call('closeWindow');
    }
  }
};
</script>
<style lang="scss" scoped>
.pages{
  padding-top:50px;
  text-align:center;
  font-size:16px;
  line-height:40px;
  width:100%;
  height:100vh;
  overflow:hidden;
  background:url('../assets/images/phone-bg.jpg') no-repeat;
  background-size:100% 100%;
}
.user-info{
  .user-image{
    width:100px;
    height:100px;
    border-radius:50%;
  }
  .user-name{
    font-size:18px;
    color:#fff;
    margin:15px 0 20px;
  }
}
.msg{
  font-size:20px;
  color:gold;
  font-weight:bold;
}
.btn{
  width:200px;
  height:45px;
  line-height:45px;
  border-radius:10px;
  color:#fff;
  margin:40px auto 0;
  background:#07C160;
  &.back{
    background:#ccc;
  }
  &:active{
    background:#eee;
  }
}
</style>
